<html><!--根目录标签 html:超文本标记语言,由很多标签标记的这样一门语言-->
	<head><!--头部:不可视标签-->
		<!--网页三要素-->
		<title></title>
		<meta name="Author" content="李龙"><!--元标签,引入相关属性-->
		<meta charset="utf-8"><!--万国码-->
		<meta name="keywords" content=".凯迪开班典礼,作业,表单"><!--关键词,seo优化-->
		<meta name="description" content="京东登录窗口,欢迎注册!!"><!--页面描述-->
		<style>
			body,p,input,form,input,label,ul,li{margin:0;}
			ul{
				padding:0;
				list-style:none;
			}
			input{
				outline:none;
			}
			html{
				width:100%;
			}
			body{
				width:100%;
				position:relative;
			}
			a{
				text-decoration:none;
				color:#666;
			}
			.header{
				width:100%;
				height:80px;
			}
			.logo{		/*头部logo*/
				position:absolute;
				width:300px;
				height:60px;
				top:10px;
				left:185px;
			}
			.header .logo b{
				position:absolute;
				display:block;
				width:110px;
				height:40px;
				top:20px;
				right:0;
				background-image:url("images/welcome.png");
				background-repeat:no-repeat;
				text-indent:-9999px;
			}
			.questionare{	/*头部问卷调查*/
				position:absolute;
				top:50px;
				right:185px;
				width:130px;
				height:16px;
				line-height:16px;
				padding-left:20px;
				color:#999;
				font-size:13px;
				background-image:url("images/q-icon.png");
				background-repeat:no-repeat;
			}
			.login{	/*登录栏*/
				width:100%;
				height:475px;
				background-color:#63f;
			}
			.login .tip{
				width:100%;
				background-color:#fff8f0;
			}
			.login .tip p{
				line-height:40px;
				font-size:12px;
				text-align:center;
				color:#999;
			}
			.login .tip p a{
				color:black;
			}
			.login .tip p a:hover{
				text-decoration:underline;
			}
			.login-form{	/*登录表单*/
				position:relative;
				width:100%;
				height:435px;
				background:#ffd800 url("images/bg.jpg") center no-repeat;/*采用复合写法减小代码体积,注意这个背景图是比较小的不足以覆盖form,所设置相似颜色作为底色background-color*/
			}
			.login-wrap{
				position:absolute;
				width:347px;
				height:400px;
				top:10px;
				right:185px;
				background-color:white;
				border:1px solid #ccc;
			}
			.login-wrap>p{
				width:100%;
				line-height:35px;								
				color: #999;
				font-size: 12px;
				text-align:center;
				background-color:#fff8f0;
			}
			.choose-wrap{
				width:100%;
				border-bottom:1px solid #f4f4f4;
				margin-bottom:34px;
			}
			.login-wrap .choose{
				width:170px;
				height:54px;
				text-align:center;
/* 					vertical-align:middle;     float不能设置*/
			}
			.login-wrap .choose-1{
				float:left;				
			}
			.login-wrap .choose-2{
				float:right;
			}
			.login-wrap .choose a{
				display:block;
				font-size:18px;
				font-weight:normal;
				transform: translate(0,17px);
			}
			.login-wrap .choose-1 a{
				border-right:1px solid #f4f4f4;
			}
			form{	/*账户及密码*/
				width:307px;
				height:120px;
				padding:0 20px;
			}
			form>div{
				position:relative;
				height: 40px;
				width: 304px;
				margin-bottom:20px;
			}
			form div>label{	/*label的标签是inline ,不能设置大小*/
				position:absolute;
				display:inline-block;
				width:38px;
				height:36px;
				border:1px solid #ccc;
				top:0;
				left:0;
				overflow:hidden;
				background:url("images/pwd-icons-new.png") no-repeat;
				z-index:3;
			}
			#form-text,#form-password{
				position:absolute;
				width: 100%;
				height:38px;
				padding: 10px 0 10px 50px;
				border:1px solid #ccc;
				top:0;
				left:0;
				font-size:14px;
			}
			.clearfix:after{
				content:"";
				display:block;
				clear:both;
			}
			.input-2{
				background-position:-48px 0;
			}
			.password-setting{
				margin-top:20px;
				/* border:1px solid #999; */
			}
			.unlogin{	/*记住密码,这里对齐input与label是个难点*/
				display:inline-block;
				width:100px;
				margin-left:20px;
				/* border:2px solid #000; */
			}
			#unlogin{
				float:left;
				height:17px;
				border:1px solid #000;
				background-color:#fff;
				opacity:0.5;/*改变复选框的底色*/
			}
			#auto-id{
				float:left;
				height:17px;
				padding-left:1px;
				font-size:12px;
			}		
			.forget{	/*忘记密码*/			
				float:right;	
				width:60px;
				height:20px;
			}
			#forget{
				display:inline-block;/*样式必须为inline-block,才能设置padding*/
				height:14px;
				font-size:12px;
				padding-top:1px;
			}
			.btn-login{	/*登录按钮*/
				width:100%;
				padding:0 20px;
				margin-top:20px;
			}
			#btn-login{
				display:block;
				width:305px;
				height:30px;
				padding:0 20px;
				font-size:20px;
				color:white;
				background-color:#e4393c;
				border:none;
			}
			.form-bottom{	/*登录栏底部图标*/
				position:absolute;
				width:100%;
				line-height:55px;
				bottom:0;
				border-top:1px solid #f4f4f4;
			}
			.form-bottom>ul{	/*将列表居中*/
				display:inline-block;
				width:100%;
				vertical-align:middle;
			}
			.form-bottom>ul>li{
				float:left;
			}
			.form-bottom>ul>li:last-child{
				float:right;
				margin-right:20px;
				font-size:14px;
			}
			.form-bottom span{
				display:inline-block;
				line-height:20px;
			}
			.icon-qq-left,.icon-wx-left{
				line-height:35px;
				margin-right:20px;
			}
			.icon-qq-left{
				margin-left:20px;
			}
			.icon-qq,.icon-wechat{
				display:inline-block;
				width:19px;
				height:18px;
				margin-top:1px;
				background:url("images/QQ-weixin.png") no-repeat 0px 0px;
				vertical-align:middle;
			}
			.icon-wechat{
				background-position:-19px 0;
			}
			.icon-sign{
				display:inline-block;
				width:19px;
				height:18px;
				margin-top:1px;
				background:url("images/pwd-icons-new.png") no-repeat -104px -75px;
				vertical-align:middle;			
			}
		</style>
	</head>
	<body><!--身体:可视化标签-->
		<div class="header">
			<div class="logo">
			<a href="https://www.jd.com/">
			<img src="images/logo.png" width="170" height="60">
			</a>
			<b>登录</b>
			</div>
			<div class="questionare">
				<a href="#">登录页面,调查问卷</a>
			</div>			
		</div>
		<div class="login">
			<div class="tip">
				<p>
					依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！新版<a href="#">《京东隐私政策》</a>已上
					线，将更有利于保护您的个人隐私。
				</p>
			</div>
			<div class="login-form">
				<div class="login-wrap">
					<p>京东不会以任何理由要求您转账汇款，谨防诈骗。</p>
					<div class="choose-wrap clearfix">
						<div class="choose choose-1">
							<a href="#">扫码登录</a>
						</div>
						<div class="choose choose-2">
							<a href="#">账户登录</a>
						</div>
					</div>

					<!-- 表单的账号密码登录 start-->
					<form action="" class="clearfix">
						<div>
							<label for="form-text" class="input-1"></label>
							<input type="text" placeholder="邮箱/用户/已验证手机" id="form-text">
						</div>
						<div>
							<label for="form-password" class="input-2"></label>
							<input type="password" placeholder="密码" id="form-password">
						</div>
					</form>
					<!-- 表单账号密码登录 ending-->

					<!-- 记住密码忘记密码 start-->
					<div class="password-setting">
						<div class="unlogin">
							<span>
								<input type="checkbox" id="unlogin">
							</span>
								<label for="unlogin" id="auto-id">记住密码</label>
						</div>
						<div class="forget">
							<a href="javascript:void(0)" id="forget">忘记密码?</a>
						</div>
					</div>
					<!--记住密码忘记密码 ending-->

					<!-- 登录按钮 start-->
					<div class="btn-login">
						<button id="btn-login">登录</button>
					</div>
					<!-- 登录按钮 ending -->
					
					<!--表单底部其他方式登录 start-->
					<div class="form-bottom">
							<ul class="clearfix">
								<li>
									<a href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&state=8C3343F98FA69501EA55C98B16AA1E9F2A3D8937A663B22F34CBDDF81F072F61771B2C7385FA907190F90DD4D39E763D&client_id=100273020&redirect_uri=https%3A%2F%2Fqq.jd.com%2Fnew%2Fqq%2Fcallback.action%3Fview%3Dnull%26uuid%3D3c4d81324a3049f385401ad2c8e60319" class="icon-qq-left">
										<b class="icon-qq"></b>
										<span>QQ</span>
									</a>
								</li>
								<li>
									<a href="https://open.weixin.qq.com/connect/qrconnect?appid=wx827225356b689e24&state=DC5B746FDE4C9F42CEF8C212BF978AC621695F2416070DAC683F3247609A7B55C354DEC18B863234A590C9314633A5FB&redirect_uri=https%3A%2F%2Fqq.jd.com%2Fnew%2Fwx%2Fcallback.action%3Fview%3Dnull%26uuid%3De9143e4b978b4249bc8e5c538348db64&response_type=code&scope=snsapi_login#wechat_redirect" class="icon-wx-left">
										<b class="icon-wechat"></b>
										<span>微信</span>
									</a>
								</li>
								<li><span>|</span></li>
								<li>
									<a href="https://reg.jd.com/reg/person?ReturnUrl=http%3A%2F%2Fwww.jd.com" class="sign-right">
										<b class="icon-sign"></b>
										<span>立即注册</span>
									</a>
								</li>
							</ul>
					</div>
					<!--表单底部其他方式登录 ending-->
			</div>
		</div>
	</body>
</html>
